<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { http } from '@/utils/http'
import { useCinemaStore } from '@/store/params'
import {useToast} from 'wot-design-uni'

const cinemaStore = useCinemaStore()
const { success: showSuccess, error: showError } = useToast()

// 定义响应式的导航栏标题
const navTitle = ref(cinemaStore.cinemaInfo.cinemaName) 
const cinemaLocation = ref(cinemaStore.cinemaInfo.currentCity) 
const activeTab = ref()
const loading = ref(false)

const goodsList = ref([
  {
    id: 1,
    name: '电影1',
    director: '章三',
    actor: '李四',
    schedule: '10:00',
    status: '热映中'
  },
  {
    id: 2,
    name: '电影1',
    director: '章三',
    actor: '李四',
    schedule: '10:00',
    status: '热映中'
  },
  {
    id: 3,  
    name: '电影1',
    director: '章三',
    actor: '李四',
    schedule: '10:00',
    status: '热映中'
  }
])


onLoad((options) => {
  navTitle.value = cinemaStore.cinemaInfo.cinemaName
})

const getGoodsData = (status) => {
  loading.value = true
  http.post('/movieSystem/goods/getGoodsList', {}).then((res: any) => {
    if (res.success) {
      goodsList.value = res.data.list
    } else {
      showError({
        msg: res.message
      })
    }
  }).finally(() => {
      loading.value = false
  })
}

const onChange = (event) => {
  getGoodsData(event.index)
}

const onBuy = (status) => {
  if (status === 1) {
    // 想看
  } else {
    // 购买
    uni.navigateTo({
      url: '/pages-home/ticketPurchaseDetails'
    })

  }
}

const selectedGoodsNumbers = computed(() => {
  return goodsList.value.reduce((sum, a) => sum + a.number, 0)
})

const selectedGoodsPrices = computed(() => {
  return goodsList.value.reduce((sum, a) => sum + a.goodsPrice * a.number, 0)
})
const goSetting = () => {
  cinemaStore.editCinemaInfo({
    settlementInfo: goodsList.value.filter(item => item.number > 0)[0]
  })
  uni.navigateTo({
    url: '/pages-mall/settlement'
  })
}


const navBack = () => {
  uni.navigateTo({
    url: '/pages/movieList'
  })
}

onMounted(() => {
  getGoodsData()
})

</script>

<template>
  <PageLayout :navbarShow="true" navLeftText="" @navBack="navBack" :navLeftArrow="true" :navTitle="navTitle">
    <view class="p-2">
      <view class="mb-1 flex justify-end">{{cinemaLocation}}</view>
      <view v-for="dataItem in goodsList" :key="dataItem.id" class="flex justify-between m-2">
        <view class="mr-2">
          <wd-img :src="dataItem.goodsPic" width="60" height="60"></wd-img>
        </view>
        <view class="flex-1">
          <view class="title mb-2">{{ dataItem.goodsName }}</view>
          <view class="flex justify-between">
            <view class="red">¥ {{dataItem.goodsPrice}}</view>
          <wd-input-number v-model="dataItem.number" :min="0" :max="dataItem.goodsStock"/>
          </view>
        </view>
      </view>
    <view class="flex justify-between items-center fixed bottom-0 left-0 right-0 bg-white pt-2">
      <view class="flex justify-between items-center">
        <wd-badge :modelValue="selectedGoodsNumbers">
          <wd-button type="icon" icon="cart"></wd-button>
        </wd-badge>
        <view class="ml-2 bold red">
          ¥ {{selectedGoodsPrices}}
        </view>
      </view>
      <wd-button type="warning" :disabled="selectedGoodsNumbers <= 0" @click="goSetting">去结算<wd-icon name="arrow-right" size="16px"></wd-icon></wd-button>
    </view>
  </view>
  </PageLayout>
</template>

<style>
.red {
  color: red;
}
</style>

<route type="page" lang="json5">
  {
    "style": {
      navigationStyle: 'custom',
      navigationBarTitleText: '',
    }
  }
</route>
